import React, {useEffect, useState} from 'react';
import {Button, Card, Carousel, Input} from "antd";
import {
    BookOutlined
} from '@ant-design/icons';
import classes from './index.module.scss'
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {getCourseList, updateCourseList} from "../../../store/frontDesk/courseSlice";
import CourseItem from "../../../component/frontDesk/CourseItem";
import LoginAlert from "../../../component/LoginAlert";
import {getToken} from "../../../utils/token";
import {debounce} from "lodash";
import {reqGetCourseList} from "../../../api/backStage/backStageApi";

const contentStyle = {
    disable: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '260px',
    textAlign: 'center',
    background: 'white',
};

const Course = () => {
    const [index, setIndex] = useState(0)

    const dispatch = useDispatch()
    const {course} = useSelector(state => state)
    const {courseList} = course
    const [open, setOpen] = useState(false)


    useEffect(() => {
        dispatch(getCourseList())
    }, [])

    // 四个按钮
    const all = () => {
        setIndex(0)
        console.log('全部')
    }
    const newest = () => {
        setIndex(1)
        console.log('最新')
    }
    const hottest = () => {
        setIndex(2)
        console.log('最热')
    }
    const price = () => {
        setIndex(3)
        console.log('价格')
    }

    const btns = [
        {
            id: 1,
            type: 'link',
            btnName: '全部',
            onClick: all
        },
        {
            id: 2,
            type: 'link',
            btnName: '最新',
            onClick: newest
        },
        {
            id: 3,
            type: 'link',
            btnName: '最热',
            onClick: hottest
        },
        {
            id: 4,
            type: 'link',
            btnName: '价格',
            onClick: price
        },
    ]

    //跳转到我的课程界面
    const nav = useNavigate()
    const goToMyCourseBtn = () => {
        if (getToken()) {
            // console.log(1)
            nav('/my-course')
        } else {
            setOpen(!open)
        }
    }

    //搜索课程
    const searchCourse = debounce(async (e) => {
        const result = await reqGetCourseList()
        dispatch(updateCourseList(result.data.filter((item) => item.title.indexOf(e.target.value) !== -1)))
    }, 500)

    return (
        <div>
            <>
                <div className={classes.Course}>
                    {/*左侧课程*/}
                    <Card title="搜索课程"
                          extra={<Input.Search placeholder="根据课程名称搜索" onChange={searchCourse}></Input.Search>}
                          style={{width: "70%"}}>
                        <div className={classes.ChooseBtn}>
                            {
                                btns.map((item) =>
                                    <Button
                                        onClick={item.onClick}
                                        key={item.btnName}
                                        type={item.type}
                                        style={{color: (item.id === (index + 1)) ? "#1677ff" : "unset"}}
                                    >
                                        {item.btnName}
                                    </Button>)
                            }
                        </div>
                        {
                            courseList.map((item) => <CourseItem key={item.id} course={item}/>)
                        }
                    </Card>


                    {/*课程中心*/}
                    <div className={classes.MyCourseContainer}>
                        <div onClick={() => goToMyCourseBtn()} className={classes.MyCourse}>
                           <span style={{color: "slategray"}}>
                            <BookOutlined style={{marginRight: 5}}/>
                            课程中心
                          </span>
                            {open && <LoginAlert open={open}/>}
                        </div>
                        <Carousel autoplay effect="fade" style={{marginTop: 30}}>
                            <div>
                                <img style={contentStyle}
                                     src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3a0a404b0e2424ca80703bb12d26b41~tplv-k3u1fbpfcp-no-mark:420:420:300:420.awebp?"
                                     alt="">
                                </img>
                            </div>
                            <div>
                                <img style={contentStyle}
                                     src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/acb81fefdc52453f99916fb73a1c7cf3~tplv-k3u1fbpfcp-no-mark:420:420:300:420.awebp?"
                                     alt="">
                                </img>
                            </div>
                            <div>
                                <img style={contentStyle}
                                     src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0bfa48ed9cd4d1689f4bef7e0d85c13~tplv-k3u1fbpfcp-no-mark:420:420:300:420.awebp?"
                                     alt="">
                                </img>
                            </div>
                            <div>
                                <img style={contentStyle}
                                     src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/11/8/16e4a65bafa2c3e5~tplv-t2oaga2asx-no-mark:420:420:300:420.awebp"
                                     alt="">
                                </img>
                            </div>
                        </Carousel>
                    </div>
                </div>
            </>
        </div>
    );
};

export default Course;